<template>
  <div>
    <page-header></page-header>
    <main>main主体</main>
    <!-- 全局组件引入，场景很多页面都用方便复用 -->
    <global-com
      :value="value"
      :name="name"
      :published="isPublished"
      :commentIds="commentIds"
      :author="author"
      @getValue="getValue"
    ></global-com>
    <p>子元素传回来的值：{{ val }}</p>
    <page-footer></page-footer>
  </div>
</template>

<script>
import PageHeader from './components/page-header'
import PageFooter from './components/page-footer'
export default {
  name: 'day-4',
  components: {
    PageHeader,
    PageFooter
  },
  data() {
    return {
      value: 1,
      name: '张三',
      isPublished: false,
      commentIds: [1, 2, 3],
      author: { aa: 1 },
      val: 0
    }
  },
  methods: {
    getValue(val) {
      this.val = val
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
